<template>
  <div class="knowledge-detail">
    <div v-if="knowledgeItem" class="detail-content">
      <h1 class="title">{{ knowledgeItem.title }}</h1>
      <div class="meta-info">
        <span class="category">{{ knowledgeItem.categoryName }}</span>
        <span class="publish-date">发布时间: {{ formatDate(knowledgeItem.publishDate) }}</span>
      </div>
      <img 
        v-if="knowledgeItem.imageUrl" 
        :src="knowledgeItem.imageUrl" 
        :alt="knowledgeItem.title"
        class="detail-image"
      />
      <div class="content" v-html="knowledgeItem.content"></div>
    </div>
    <div v-else class="loading">
      加载中...
    </div>
  </div>
</template>

<script>
import api from "@/api/index";
export default {
  components: {},
  props: {},
  data() {
    return {
      knowledgeItem: null 
    };
  },
  methods: {
    async getKnowledgeDetail(id) {
      try {
        const res = await api.getKnowLedgeApi();
        // 从列表中找到对应id的项
        if (res.data ) {
          this.knowledgeItem = res.data.find(item => item.id == id) || null;
        }
        // console.log(this.knowledgeItem);
      } catch (error) {
        console.error("获取详情失败:", error);
      }
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      return date.toLocaleDateString('zh-CN');
    }
  },
  onLoad(options) {
    // 接收传入的id参数
    if (options.id) {
      this.getKnowledgeDetail(options.id);
    }
  }
};
</script>

<style scoped>
.knowledge-detail {
  padding: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.meta-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.category {
  background-color: #409eff;
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 14px;
}

.publish-date {
  color: #999;
  font-size: 14px;
}

.detail-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 20px;
}

.content {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
}
</style>